<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../vue.js"></script>
</head>

<body>
  <div id="app">
    <form action="###">
      <p>请输入用户名：<input type="text" v-model="username"></p>
      <!-- 
        多选框的使用方式有两种:
          1.单独使用：一般代表我们是否同意等等逻辑。要使用布尔值进行收集
          2.多个使用：使用数组来收集多选的内容
       -->
      <p>你是否同意该协议<input type="checkbox" v-model="isAgree"></p>
      <p>
        请选择你喜欢的学科（多选）
        <input type="checkbox" value="html" v-model="like" />html
        <input type="checkbox" value="css" v-model="like" />css
        <input type="checkbox" value="js" v-model="like" />js
        <input type="checkbox" value="react" v-model="like" />react
        <input type="checkbox" value="vue" v-model="like" />vue
      </p>

      <!-- 
        v-model收集单选框的内容
            因为单选框组我们只能选择一个，并且单选框的值是一个字符串
            所以我们选择使用字符串来收集
       -->
      <p>
        <input type="radio" value="西安" v-model="city">西安
        <input type="radio" value="深圳" v-model="city">深圳
        <input type="radio" value="武汉" v-model="city">武汉
        <input type="radio" value="杭州" v-model="city">杭州
      </p>

      <!-- 
        v-model收集下拉列表的内容
            如果下拉列表单选，则使用字符串进行收集
            如果下拉列表多选 则使用数组进行收集
       -->
      <p>
        请选择你喜欢的球队
        <select v-model="football">
          <option value="阿根廷">阿根廷</option>
          <option value="法国">法国</option>
          <option value="德国">德国</option>
          <option value="意大利">意大利</option>
          <option value="巴西">巴西</option>
        </select>
      </p>
      <p>
        请选择你同学喜欢的球队
        <select v-model="footballs" multiple>
          <option value="阿根廷">阿根廷</option>
          <option value="法国">法国</option>
          <option value="德国">德国</option>
          <option value="意大利">意大利</option>
          <option value="巴西">巴西</option>
        </select>
      </p>
    </form>
  </div>
  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          username: "xiaowang",
          isAgree: false,
          like: [],
          city: "",
          football: "",
          footballs: []
        };
      }
    })
  </script>
</body>

</html>